<template>
  <!-- 物流信息 -->
  <div>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div class="logistics-status" :class="statusClass">{{ status }}</div>
        <div class="logistics-company">{{ this.info.logisticsCompany }}</div>
        <div class="logistics-no">{{ this.info.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in info.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { statusObj } from '@/utils/status'

export default {
  name: 'GoodsList',
  props: {
    info: {
      type: Object,
      //   default: {
      //   orderNo: "", //类似于id
      //   role: "", // 角色 ==> 用于判断是否有查看用户详情的权限
      //   logisticsStatus: "", // 0 未发货 1 已发货 2 已签收 3 未签收
      //   logisticsCompany: "", // 快递公司的名称
      //   logisticsNo: "", // 快件运单号
      //   logisticsInfo: [],
      //   goodInfo: {
      //     // 商品信息
      //     goodNo: "", // 商品id
      //     goodName: "", // 商品名称
      //     type: "", // 0 代表的是文本 1代表的是 图片
      //     // desc 描述 ==> 可以是图片 也可以是其他的东西。数据可以随便改
      //     desc: "",
      //   },
      // },
      default: () => ({}),
    },
  },
  data() {
    return {
      statusObj: statusObj,
    }
  },

  computed: {
    status() {
      return this.statusObj[this.info.logisticsStatus][0]
    },
    statusClass() {
      return this.statusObj[this.info.logisticsStatus][1]
    },
  },
}
</script>

<style scoped>
.blue {
  color: blue;
}

.red {
  color: red;
}
.pink {
  color: pink;
}
.green {
  color: green;
}
</style>
